<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
    <script src="../Stats.js" data-ke-src="../Stats.js"></script>
    <style>
        #stats {
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div id="stats">

    </div>
    <script>
        var width = window.innerWidth
        var height = window.innerHeight
        var renderer,camera,scene,light,raycaster;
        var stats;
        var mouse = new THREE.Vector2()
        function onMousemove(event) {
            mouse.x = ( event.clientX / width ) * 2 - 1;
	        mouse.y = - ( event.clientY / height ) * 2 + 1;
        }
        function Resize() {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width/height
            camera.updateProjectionMatrix();
            renderer.setSize( width , height );
        }
        window.addEventListener("mousemove",onMousemove,false)
        window.addEventListener("resize",Resize,false)
        function init() {
            renderer = new THREE.WebGLRenderer({antialise:false,alpha:false})
            renderer.setSize(width,height)
            renderer.setClearColor("white",1)
            document.body.appendChild(renderer.domElement)

            camera = new THREE.PerspectiveCamera(45,width/height,1,10000)
            camera.position.set(0,0,0)


            scene = new THREE.Scene()

            light = new THREE.DirectionalLight(0xffffff)
            light.position.set(1,1,1) //只是方向而已
            scene.add(light)

            /*
            light = new THREE.DirectionalLight(0xffffff)
            light.position.set(-1,-1,1) //只是方向而已
            scene.add(light)
            */
            stats = new Stats()
            document.getElementById("stats").appendChild(stats.domElement)


            raycaster = new THREE.Raycaster();
            var num = 2000
            var n = 800,n2 = 400;
            var geometry = new THREE.BoxGeometry(20,20,20)
            for(let i = 0; i < num ; ++i) {
                let tcolor = Math.random()*0xffffff
                let material = new THREE.MeshLambertMaterial({color:tcolor})
                let mesh = new THREE.Mesh(geometry,material)
                let x = Math.random()*n-n2
                let y = Math.random()*n-n2
                let z = Math.random()*n-n2
                let xScale = Math.random()+0.5
                let yScale = Math.random()+0.5
                let zScale = Math.random()+0.5
                mesh.position.set(x,y,z)
                mesh.rotation.set(xScale,yScale,zScale)
                mesh.scale.set(xScale,yScale,zScale)
                scene.add(mesh)
            }
            console.log(scene)
            animate()
            //renderer.render(scene,camera)
        }
        var current = 0
        var flag = false
        var lastChoice = null
        function animate() {
            requestAnimationFrame(animate)
            stats.begin()
            //先绕赤道转
            //y = 0 x = ? z = ?
            //x = cos*r
            //z = sin*r 
            // 转一圈 0 - 2 TI
            /*
            current+=0.01
            camera.position.x = 1600 * Math.cos(current)
            camera.position.z = 1600 * Math.sin(current)
            */
            current+=0.1
            camera.position.x = 400 * Math.cos(THREE.Math.degToRad(current))
            camera.position.y = 400 * Math.sin(THREE.Math.degToRad(current))  
            camera.position.z = 400 * Math.sin(THREE.Math.degToRad(current))  
            camera.lookAt(scene.position)
                       //计算
                       //emissive 自发光 没灯也能亮
            raycaster.setFromCamera( mouse, camera );
            var intersects = raycaster.intersectObjects( scene.children );
            if(intersects.length>0) {
                //新的选中 恢复老版本颜色 更改新选中颜色
                if(intersects[0].object != lastChoice) {
                    //老的选中
                    if(lastChoice) {
                        //console.log(lastChoice)
                        lastChoice.material.emissive.set(lastChoice.currentHex)
                    }
                    //新的选中
                    lastChoice = intersects[0].object
                    lastChoice.currentHex = intersects[0].object.material.emissive.getHex()
                    intersects[0].object.material.emissive.set(0xff0000);
                } 
            } else {
                if(lastChoice) lastChoice.material.emissive.set(lastChoice.currentHex)
                lastChoice = null
            }
            
            for(let i = 0 ; i< scene.children.length;i++) {
               let obj = scene.children[i]
               if(obj.type!="DirectionalLight") {
                   //let temp = obj.position.clone()
                   //obj.position.set(0,0,0)
                   obj.rotation.y = obj.rotation.y + 0.01
                   //obj.position.copy(temp)
               }
           }
            renderer.render(scene,camera)
            stats.end()
        }
        init()
    </script>
</body>
</html>